<template>
    <div id="chart-storage" ref="chart-storage"></div>
</template>

<script>
import $ from 'jquery'
import 'jquery-sparkline'

export default {
  name: 'storage-chart',
  data () {
    return {
      storageData: [57, 69, 70, 62, 73, 79, 76, 77, 73, 52, 57, 50, 60, 55, 70, 68]
    }
  },
  mounted () {
    let options = {
      type: 'line',
      width: '100%',
      height: '40',
      spotRadius: 5,
      lineWidth: 1.5,
      lineColor: 'rgba(255,255,255,.85)',
      fillColor: 'rgba(0,0,0,0.03)',
      spotColor: 'rgba(255,255,255,.5)',
      minSpotColor: 'rgba(255,255,255,.5)',
      maxSpotColor: 'rgba(255,255,255,.5)',
      highlightLineColor: '#ffffff',
      highlightSpotColor: '#ffffff',
      tooltipChartTitle: 'Usage',
      tooltipSuffix: ' %'
    }

    $('#chart-storage').sparkline(this.storageData, options)
  }
}
</script>

<style scoped>

</style>
